
<template>
  <el-container direction="vertical">
    <layout-header></layout-header>
    <el-main>
      <el-row>
        <el-col :span="4">
          <el-menu mode="vertical">
            <el-menu-item v-for="submenus in menus" :key="submenus.key">
              <template slot="title">{{ submenus.title }}</template>
            </el-menu-item>
          </el-menu>
        </el-col>
        <el-col :span="14">
          <el-carousel indicator-position="outside">
            <el-carousel-item v-for="item in 4" :key="item">
              <h3>{{ item }}</h3>
            </el-carousel-item>
          </el-carousel>
          <article-list
            v-for="item in articleList"
            :key="item"
            :post="item"
          ></article-list>
        </el-col>
        <el-col :span="4" class="right-sider">
          <el-input
            placeholder="请输入内容"
            v-model="searchText"
            class="input-with-select"
            ><el-button slot="append" icon="el-icon-search"></el-button>
          </el-input>
          <el-table :data="tableData" border>
            <el-table-column prop="label">
              <template slot="header">
                <i class="el-icon-s-data"> 热门文章</i>
              </template>
            </el-table-column>
          </el-table>
          <el-image
            :src="url"
            fit="fill"
            :lazy="true"
            style="width: 250px; height: 100px; margin-top: 10px"
          ></el-image>
          <el-card
            shadow="always"
            :body-style="{ padding: '0px' }"
            style="width: 250px"
          >
            <el-calendar v-model="value" style="height: 350px"> </el-calendar>
          </el-card>
          <el-card class="box-card" style="margin-top: 10px; width: 250px">
            <el-tag v-for="item in tags" :key="item.id" style="margin: 3px"
              ><i :class="item.icon"></i>{{ item.descr }}</el-tag
            >
          </el-card>
        </el-col>
      </el-row>
    </el-main>
  </el-container>
</template>

<script>
import ArticleList from "../components/ArticleList.vue";
import LayoutHeader from "../components/layout-header.vue";
import { getAllTags, getArticleList } from "@/api";
import LayoutFooter from "../components/layout-footer.vue";
import { getHotArticleList } from "../api";
export default {
  //需要引入的组件
  components: {
    "article-list": ArticleList,
    "layout-header": LayoutHeader,
    LayoutFooter,
  },
  props: {},
  //存放数据
  data() {
    return {
      menus: [
        {
          title: "正殿",
          key: 1,
        },
        {
          title: "正殿",
          key: 2,
        },
        {
          title: "正殿",
          key: 3,
        },
        {
          title: "正殿",
          key: 4,
        },
      ],
      url: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fnimg.ws.126.net%2F%3Furl%3Dhttp%3A%2F%2Fdingyue.ws.126.net%2F2021%2F0419%2F0d438775j00qrtds9000qc000hs00a0g.jpg%26thumbnail%3D650x2147483647%26quality%3D80%26type%3Djpg&refer=http%3A%2F%2Fnimg.ws.126.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1635525109&t=d3e0b29c523653887f0fc31c31ae9b55",
      value: new Date(),
      post: [
        {
          id: 0,
          isTop: true,
          banner: "https://s1.ax1x.com/2020/05/14/YDhagx.jpg",
          isHot: true,
          pubTime: new Date(),
          title: "看一遍闭着眼都会安装Lua了",
          summary:
            "Lua 是一种轻量小巧的脚本语言，能为应用程序提供灵活的扩展和定制功能。",
          content: "",
          viewsCount: 4045,
          commentsCount: 99,
        },
      ],
      articleList: [],
      searchText: "",
      tableHeader: {
        text: "wlr",
        index: 1,
      },
      tableData: [],
      tags: [],
      otherData: [],
    };
  },
  //计算属性
  computed: {},

  mounted: {},

  methods: {
    onChange() {
      return;
    },
    getTags() {
      getAllTags().then((resp) => {
        this.tags = resp;
      });
    },
    getArticle() {
      getArticleList().then((resp) => {
        this.articleList = resp;
      });
    },
    getHot() {
      getHotArticleList().then((resp) => {
        this.otherData = resp;
        this.otherData.forEach((element) => {
          var arr = element.split("#");
          let obj = {
            label: arr[1],
            id: arr[0],
            text: arr[1],
          };
          this.tableData.push(obj);
          
          console.log(this.tableData);
        });
      });
    },
  },
  created() {
    this.getTags();
    this.getArticle();
    this.getHot();
  },
};
</script>
<style>
.el-carousel__item h3 {
  color: #475669;
  font-size: 18px;
  opacity: 0.75;
  line-height: 300px;
  margin: 0;
}
.el-input {
  width: 250px;
}
.el-table {
  width: 250px;
  margin-top: 10px;
}
.el-calendar-table .el-calendar-day {
  height: 30px;
}
.el-calendar__header {
  width: 250px;
}
.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
.right-sider {
  margin-left: 30px;
}
</style>